<template>
	<view class="bg min100" style="padding-bottom:118rpx;">
		<view>
			<view class="result-box">
				<view class="result">
					<image :src="info.images" mode="aspectFill"></image>
					<view class="title">
						{{info.goods_category_name}}
					</view>
					<view class="desc">
						剩余<text>{{info.surplus}}</text>个
					</view>
				</view>
				<image src="../../static/top2.png" mode=""></image>
			</view>

			<!-- 介绍 -->
			<view class="plr-20">
				<view class="plr-30 ptb-30 radius-16">
					<empty v-if="info.goods.length === 0"></empty>
					<view class="collection-list" :class="{center: info.goods.length === 1}" v-else>
						<view class="collection-list-item" v-for="(item,index) in info.goods" :key="index">
							<image v-if="collectionSelectNumber[item.id] > 0" :src="item.image" mode="aspectFill">
							</image>
							<view class="collection-select"
								:class="{'collection-select-null': collectionSelectNumber[item.id] > 0 }"
								@tap="showCollectionFn(index)">
								<button v-if="collectionSelectNumber[item.id] > 0">
									<image src="../../static/add.png" mode="widthFix"></image>
								</button>
								<button v-else>
									<image src="../../static/add2.png" mode="widthFix"></image>
								</button>
								<text v-if="collectionSelectNumber[item.id] === 0">再添加{{item.number}}个即可合成</text>
							</view>
							<text class="title">{{item.name}}</text>
							<text class="price">
								价值：￥{{item.price}}
							</text>
							<text class="number">
								已选择：{{collectionSelectNumber[item.id]}}/{{item.number}}
							</text>
							<!--							<view class="flex1 flex-wrap">-->
							<!--								<view class="flex1 mt-20 flex-middle mr-20" v-for="(em,ind) in item.goods_number_f" :key="em.id" @click="changeItem(item,em)">-->
							<!--									<view class="white mr-20">编号：{{ em.number_f }}</view>-->
							<!--									<image src="/static/select-pink.png" mode="" class="selectImg" v-if="em.checked"></image>-->
							<!--									<image src="/static/select.png" mode="" class="selectImg" v-else></image>-->
							<!--								</view>-->
							<!--							</view>-->
						</view>
					</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="mt-30 plr-20 ptb-30" v-if="info.content">
				<view class="mb-30 size-30 white">
					作品故事
				</view>
				<view class="white infoWrap" v-html="info.content">

				</view>
			</view>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30" v-if="info.status == 1">
			<u-button class="button" @click="toCompose" :disabled="btnDisabled" hover-class="none"
				v-if="info.is_forge==1">立即锻造</u-button>
			<u-button class="gary" :disabled="true" hover-class="none" v-if="info.is_forge==0">材料不足</u-button>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30" v-if="info.status == 2">
			<u-button class="gary" disabled hover-class="none">{{ info.status_text }}</u-button>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30" v-if="info.status == 2">
			<u-button class="gary" disabled hover-class="none">{{ info.status_text }}</u-button>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30" v-if="info.status == 4">
			<u-button class="gary" disabled hover-class="none">
				{{ info.status_text }}
				<u-count-down :timestamp="info.diff_time" bg-color="background:transparent" color="#ffffff"
					font-size="24" separator-color="#ffffff" style="margin-left: 5rpx" @end="endTime"></u-count-down>
			</u-button>
		</view>


		<u-popup v-model="showCollection" mode="bottom" border-radius="30">
			<view class="select-collection-tab">
				<view class="left">
					<button @tap="showCollection = false">取消</button>
				</view>
				<text class="title">我拥有的</text>
				<view class="right">
					<text v-if="goodsIndex > -1 ">
						{{collectionSelectNumber[info.goods[goodsIndex].id]}}/<text>{{info.goods[goodsIndex].number}}</text>
					</text>
					<button @tap="showCollection = false">确认</button>
				</view>
			</view>

			<scroll-view style="height: 70vh" :scroll-y="true">
				<view class="" style="padding: 50rpx 50rpx 0;">
					<view class="collection-list"
						v-if="goodsIndex >= 0 && info.goods[goodsIndex].goods_number_f.length > 0">
						<view class="collection-list-item" :class="{active: item.checked}"
							v-for="(item,index) in info.goods[goodsIndex].goods_number_f" :key="index"
							@tap="changeItem(item)">
							<image :src="info.goods[goodsIndex].image" mode="aspectFill" style="position: relative">
							</image>
							<text class="title">{{info.goods[goodsIndex].name}}</text>
							<text class="number">
								编号：{{ item.number_f }}
							</text>
						</view>
					</view>
					<empty v-else style="margin-bottom: 200rpx"></empty>
				</view>
			</scroll-view>
		</u-popup>

		<!-- 成功 -->
		<u-popup v-model="successShow" mode="center" class="bg" border-radius="30" width="500rpx">
			<view class="successWrap text-center size-24 pb-50">
				<image :src="successConfig.image" class="getImg radius-20"></image>
				<view class="mt-30 mb-20 white">
					{{successConfig.name}}
				</view>
				<view class="gray-2">
					价值：<text class="red">￥{{successConfig.price}}</text>
				</view>
			</view>
		</u-popup>
		<!-- 失败 -->
		<u-popup v-model="failShow" mode="center" class="bg" border-radius="30" width="500rpx">
			<view class="failWrap text-center size-24 white pb-50">
				很遗憾，祝您下次好运！
			</view>
		</u-popup>
		<!-- 动图 -->
		<u-mask :show="gifShow" @click="gifShow = false">
			<view class="openGif">
				<image class="gifImg" :src="gifUrl"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				btnDisabled: false,
				gifUrl: "../../static/stuff.gif",
				gifShow: false, //盲盒动图
				successConfig: {},
				failShow: false,
				successShow: false,
				id: '',
				info: {
					goods: []
				},

				showCollection: false,
				collectionSelectNumber: {},
				goodsIndex: -1,

				loading: false,
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.getDetails()
		},
		onHide() {
			this.successShow = false;
			this.failShow = false;
		},
		methods: {
			showCollectionFn(index) {
				this.goodsIndex = index;
				this.showCollection = true;
			},

			endTime() {
				this.getDetails()
			},
			getDetails() {
				this.$http('api/forge/forgeDetail', {
					id: this.id
				}).then(res => {
					const collectionSelectNumber = {};
					res.goods.forEach(item => {
						collectionSelectNumber[item.id] = 0;
						item.goods_number_f.forEach((em, index) => {
							em.checked = false
						})
					})
					this.info = res;
					this.collectionSelectNumber = collectionSelectNumber;
					uni.setNavigationBarTitle({
						title: `合成-${this.info.goods_category_name}`
					})
				})
			},
			changeItem(item) {
				const goods = this.info.goods[this.goodsIndex];
				const num = this.collectionSelectNumber[goods.id];

				if (!item.checked && num >= goods.number) {
					return;
				}
				this.$set(item, 'checked', !item.checked);
				this.collectionSelectNumber = this.info.goods.reduce((obj, item) => {
					return {
						...obj,
						[item.id]: item.goods_number_f.filter(item => item.checked).length,
					};
				}, {});
			},
			handleBack() {
				if (getCurrentPages().length === 1) {
					uni.switchTab({
						url: '/pages/home/index',
					})
				} else {
					uni.navigateBack()
				}
			},
			// 合成
			toCompose() {
				if (this.loading || this.failShow || this.successShow) return;
				let ids = []
				let bool = []
				this.loading = true;
				this.info.goods.forEach(item => {
					let id = []
					item.goods_number_f.forEach(data => {
						data.checked ? ids.push(data.id) : ''
						data.checked ? id.push(data.id) : ''
					})
					bool.push(id.length >= item.number)
				})
				if (!bool.every(item => item)) return uni.showToast({
					title: '选择材料数量不足',
					icon: "none"
				})
				this.$http('api/forge/forge', {
					id: this.id,
					ids: ids.join(',')
				}).then(res => {
					this.gifShow = true;
					this.btnDisabled = false;
					setTimeout(() => {
						this.gifShow = false;
						this.gifUrl = `../../static/stuff.gif?${new Date().getTime()}`
						if (res.is_success == 1) {
							uni.showToast({
								title: "锻造成功!",
								icon: "none"
							})
							this.successShow = true;
							this.successConfig = res;
						} else {
							uni.showToast({
								title: "锻造失败!",
								icon: "none"
							})
							this.failShow = true;
						}
						this.loading = false;
						setTimeout(() => {
							uni.navigateTo({
								url: "../my/myChip"
							})
						}, 2000)
					}, 4000)
				}).catch(() => this.loading = false);
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f5f5f5;
	}

	// 新样式
	.result-box {
		width: 100%;
		height: max-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 0 0rpx;

		.result {
			width: 350rpx;
			display: flex;
			overflow: hidden;
			flex-direction: column;
			border-radius: 15rpx;
			border: 15px solid #ddd;
			border-image: linear-gradient(rgb(255, 77, 0), #ff7723) 30 30;
			clip-path: inset(0 0 round 15rpx);

			image {
				width: 350rpx;
				height: 300rpx;
			}

			.title {
				font-size: 36rpx;
				font-weight: bold;
				padding: 20rpx 20rpx 5rpx;
			}

			.desc {
				font-size: 26rpx;
				color: #999999;
				padding: 5rpx 20rpx 20rpx;

				text {
					color: #10aeff;
				}
			}

		}

		&>image {
			width: 100rpx;
			height: 70rpx;
			margin-top: 20rpx;
		}
	}

	.collection-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		&.center {
			justify-content: center;
		}

		.collection-list-item {
			width: 300rpx;
			border-radius: 15rpx;
			background-color: #FFFFFF;
			margin-bottom: 50rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			position: relative;

			&.active {
				box-shadow: 0 0 5rpx 1px rgb(15, 154, 48, 0.6);
			}

			&>image {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 15rpx;
				position: absolute;
				top: 0;
			}

			&>text {
				padding: 0rpx 20rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 28rpx;

				&.title {
					font-weight: bold;
				}

				&.price,
				&.number {
					color: #666666;
					font-size: 26rpx;
				}

				&:last-child {
					margin-bottom: 15rpx;
				}
			}

			.collection-select {
				width: 300rpx;
				height: 300rpx;
				position: relative;
				margin-bottom: 15rpx;
				box-shadow: inset 0 0 20rpx 1px rgb(15, 154, 48);
				display: flex;
				justify-content: center;
				align-items: center;

				&>button {
					width: 60rpx;
					height: 60rpx;
					border-radius: 10rpx;
					background-color: rgba(15, 154, 48, 0.5);
					padding: 0;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 50rpx;
					}
				}

				&>text {
					position: absolute;
					bottom: 0;
					width: 100%;
					box-sizing: border-box;
					padding: 5rpx 20rpx;
					font-size: 26rpx;
					background-color: #999999;
					color: #FFFFFF;
				}

				&.collection-select-null {
					box-shadow: none;

					&>button {
						background-color: #FFFFFF;
						box-shadow: 0 0 5rpx 1px rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}

	.select-collection-tab {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 50rpx;

		button {
			font-size: 30rpx;
			display: block;
			margin: 0;
			padding: 0;
			width: max-content;
			background: none;
			border: none;
			color: #999999;

			&::after {
				display: none;
			}
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.left,
		.right {
			width: 200rpx;
		}

		.right {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			&>button {
				color: rgba(15, 154, 48, 0.5);
			}

			&>text {
				font-size: 26rpx;
				color: #999999;
				margin-right: 20rpx;

				text {
					color: rgba(15, 154, 48, 0.5);
				}
			}
		}
	}

	// 新样式end

	.white {
		color: #3c3c3c;
	}

	.gold {
		color: #9c8b66;
	}

	.back {
		position: relative;
		height: 0;

		image {
			position: absolute;
			width: 20rpx;
			height: 36rpx;
			top: 30rpx;
			left: 30rpx;
			z-index: 99;
		}
	}

	.collectImg {
		width: 100%;
		height: 480rpx;
	}

	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.btmWrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
		background: #fff;
		// background: brown;
		height: 118rpx;
		box-sizing: border-box;
		padding: 15rpx 30rpx;

		.button {
			background: linear-gradient(90deg, #EEA634, #DE2D32);
		}

		.button,
		.gary {
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			padding: 0;
			margin: 0;
			line-height: 88rpx;
			height: 88rpx;
			color: #fff;
			border-radius: 44rpx;

			&::after {
				border: none;
			}
		}

		.gary {
			background: #AAAAAA;
		}
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.infoWrap {

		/deep/ img {
			width: 100% !important;
			height: auto;
		}
	}

	/deep/ .u-btn--primary--disabled {
		background: #DEE4E8 !important;
	}

	.successWrap {
		background: url(../../static/success.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 622rpx;
		padding-top: 234rpx;
	}

	.failWrap {
		background: url(../../static/fail.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 412rpx;
		padding-top: 278rpx;
	}

	.getImg {
		width: 240rpx;
		height: 240rpx;
		background: #999;
	}

	/deep/ .u-mode-center-box {
		background-color: transparent;
	}

	.openGif {
		width: 620rpx;
		height: 620rpx;
		margin: 400rpx auto 0;

		.gifImg {
			width: 620rpx;
			height: 620rpx;
		}
	}

	.selectImg {
		width: 32rpx;
		height: 32rpx;
		display: block;
		filter: brightness(0.1);
	}
</style>
